<template>
	<view>
		<navbar isBack>
			<view class="pr10">
				<u-search type="number" placeholder="请输入手机号码" v-model="phone" :animation="true" @search="search" @custom="search"
					@blur="search" :action-style="{color:'#222'}" :clearabled="false"></u-search>
			</view>
		</navbar>
		<view style="width: 100%;height: 80rpx;">
			<view class="bgc-fff fs26 z-flex z-flex-align-c pl20 pr20"
				style="width: 100%;height: 80rpx;position: fixed;z-index: 1;border-bottom: 1rpx solid #f5f5f5;">
				<text>
					用户总数
				</text>
				<text class="fwb ml10 mr10">
					{{count || 0}}
				</text>
				<text>
					人
				</text>
			</view>
		</view>
		<view>
			<uni-list :border="true">
				<!-- 显示圆形头像 -->
				<!-- 				<uni-list-chat :ellipsis="2" :avatar-circle="false" :title="item.phone" :avatar="noAvatar"
					:time="item.time" v-for="item in list" :key="item._id"
					:note="item.isAdmin==1?'管理员':item.isMember==1?'会员':'普通用户'" link
					@click="handShowAction(item)"></uni-list-chat> -->
				<uni-list-item :title="item.phone" :note="item.role" showArrow :thumb="noAvatar" thumb-size="lg"
					:rightText="item.time" v-for="item in list" :key="item._id" @click="handShowAction(item)" link />
			</uni-list>
		</view>
		<vempty type="data" v-if="datalen" title="暂无数据"></vempty>
		<u-action-sheet safe-area-inset-bottom :list="actionlist" v-model="showAction" @click="handaction"
			border-radius="20"></u-action-sheet>
		<footerBottom>
			<view class="pl20 pr20 pt20" style="height: 100%;width: 100%;">
				<uni-pagination v-model="current" :total="page.total" @change="changePage" />
			</view>
		</footerBottom>
	</view>
</template>

<script>
	import {
		userListApi
	} from './api/index.js'
	export default {
		data() {
			return {
				datalen: false,
				noAvatar: this.$noAvatar,
				phone: '',
				list: [],
				page: {
					page: 1,
					pageSize: 10,
					total: 0,
				},
				count: 0,
				current: 1,
				actionlist: [{
					text: '查看详情',
					type: 1,
					permissions: "detail"
				}, {
					text: '编辑',
					type: 2,
					permissions: "edit"
				}],
				showAction: false,
				currentObj: {},
			}
		},
		onLoad() {
			uni.showLoading({
				title: '请稍后...'
			})
			let newac = []
			let actionlist = this.$btnAuth('mapPages/backAdmin/useradmin/index').filter(i => i.checked)
			this.actionlist.map(i => {
				actionlist.map(k => {
					if (i.permissions == k.permissions) {
						newac.push(i)
					}
				})
			})
			// this.actionlist = newac
		},
		onShow() {
			this.getUserList()
		},
		methods: {
			search(val) {
				uni.showLoading({
					title: '请稍后...'
				})
				this.phone = val
				this.current = 1
				this.page.page = 1
				this.getUserList()
			},
			changePage(e) {
				this.list = []
				this.page.page = e.current
				uni.showLoading({
					title: '请稍后...'
				})
				this.getUserList()
			},
			handShowAction(i) {
				this.currentObj = i
				this.showAction = true
			},
			handaction(index) {
				let {
					type,
					text
				} = this.actionlist.filter((i, s) => index == s)[0]
				let path = 'mapPages/backAdmin/useradmin/add'
				if (type == 1) {
					// 查看详情
					this.$nextTick(() => {
						uni.$u.route({
							url: path,
							params: {
								_id: this.currentObj._id
							}
						})
					})
				}
				if (type == 2) {
					// 编辑
					this.$nextTick(() => {
						uni.$u.route({
							url: path,
							params: {
								_id: this.currentObj._id,
								navTile: '编辑用户',
								pageType: 'edit'
							}
						})
					})
				}
			},
			async getUserList() {
				const {
					code,
					data
				} = await userListApi({
					...this.page,
					phone: this.$u.trim(this.phone, 'all')
				})
				uni.hideLoading()
				if (code == 0) {
					this.list = data.data
					this.page.total = data.total
					this.count = data.total
					this.datalen = data.total ? false : true
				} else {
					this.datalen = true
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.uni-list-chat__header {
		border: none;
	}

	/deep/.uni-list--border-top {
		background: #fff;
	}
</style>